<template>
  <div class="con-box">
      <findPassword></findPassword>
      <div class="con">
            <div class="progress-con">
                <div class="progress">
                    <div class="line">
                        <p class="circle1 active">
                            <span class="num">1</span>
                            <span class="text">手机验证</span>
                        </p>
                        <p class="circle2">
                            <span class="num">2</span>
                            <span class="text">设置新密码</span>
                        </p>
                        <p class="circle3">
                            <span class="num">3</span>
                            <span class="text">设置成功</span>
                        </p>
                   </div>
                   <div class="line-active" :style="{width:((1/3)*1000)*partNum+'px'}"></div>
                </div>
            </div>
            <div class="form">
                <el-form label-width="128px" :model="ruleForm" :rules="rules" ref="ruleForm" class="showFirst">
                    <div>
                         <el-row :gutter="20">
                            <el-col :span="18">
                                <el-form-item label="手机号码" prop="phone">
                                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"  :maxlength="11"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                 <el-button :disabled="getCodeBtn" @click="getCode('ruleForm')">{{countTimeDown}}</el-button>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="18">
                                <el-form-item label="输入验证码" prop="qrcode">
                                    <el-input v-model="ruleForm.qrcode" :disabled="disabledCode"  placeholder="请输入输入验证码" @change="changeCode"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="18">
                              <el-button type="primary" :disabled="nextBtn" @click="next('ruleForm')" class="next">下一步</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
      </div>
  </div>
</template>
<script>
import {getRule, getPhoneCodeInRegister, getCaptcha, checkCaptcha, verifyCaptcha} from 'api/login';
import { validatePhone } from 'utils/validate';
import validate from '@/utils/validate';
import findPassword from './findPassword';
import sha256 from 'sha256';
export default {
    components: {findPassword},
    data() {
        return {
            partNum: 1,
            getCodeBtn: false,
            nextBtn: true,
            disabledCode: true,
            countTimeDown: '获取验证码', // 倒计时
            totleTime: 120,
            status: 1,
            // beginTime: '', // 得到验证码的时间
            ruleForm: {
                phone: '',
                qrcode: ''
            },
            pRule: { 
                pstart: '',
                pend: '',
                oc: ''
            },
            gotCode: '', // 获得的验证码
            gotPhone: '', // 获得的发送验证码的手机号码
            rules: {
                phone: [...validate.phoneRequired()],
                qrcode: [
                    {required: true, min: 0, message: '请输入验证码'}
                ]
               
            }
        }
    },
    created() {
        this.getpRule();
    },
    methods: {
        changeCode(val) {
            val?this.nextBtn=false:this.nextBtn=true
        },
        // 获取安全规则
        getpRule() {
            getRule().then(res => {
                this.pRule.pstart = res.data.content.ps;
                this.pRule.pend = res.data.content.pe;
                this.pRule.oc = res.data.content.oc;
            }).catch(e => {
                console.log(e);
            })
        },
        // 安全码的计算 by cuihd 20180702
        // ps表示截取手机号的开始位置，pe表示截取手机号的结束位置，oc表示运算符种类（0表示与运算 1表示或运算 2表示异或）
        getCutNum(phone, timeStamp, ps, pe, oc) {
            let cutNum;
            ps = Number(ps); // 强制转换成数字
            pe = Number(pe);
            phone = String(phone);
            timeStamp = String(timeStamp);         
            phone = Number(phone.substring(ps, pe)); // 截取ps-pe之间的数
            timeStamp = Number(timeStamp.substring(timeStamp.length-4)); // 截取时间戳的后四位
            switch (oc) {
                case '0': // 0表示与运算
                    cutNum = phone & timeStamp;
                    break;
                case '1': // 1表示或运算
                    cutNum = phone | timeStamp;
                    break;
                default: // 2表示异或
                    cutNum = phone ^ timeStamp;
                    break;
            } 
            // 进行sha256加密
            return sha256(String(cutNum))
        },
        // 点击获取验证码
        getCode(ruleForm) {
            this.$refs.ruleForm.validateField('phone');
            let phone=this.ruleForm.phone;
            if (validatePhone(phone)) {    // 手机号码输入格式正确后 获取验证码接口
                // 判断是前台还是后台
                let verification, timeStamp;
                timeStamp = new Date().getTime();// 时间戳
                timeStamp = String(timeStamp);
                verification = this.getCutNum(phone, timeStamp, this.pRule.pstart, this.pRule.pend, this.pRule.oc); // 安全码
                let loginStatus = this.$route.query.loginStatus;
                if (loginStatus == '1') {// 前台
                    this.exueCodeInRegister(phone, verification, timeStamp);
                }
                if (loginStatus == '2') {// 后台
                    this.schoolCodeInRegister(phone, verification, timeStamp);
                }

            }
        },
        // 前台 获取验证码
        exueCodeInRegister(phone, verification, timeStamp) {
            getCaptcha(phone, verification, timeStamp).then(res => {
                this.status=1;// 可以点击下一步
                this.disabledCode=false;
                this.getCodeBtn=!this.getCodeBtn; // 禁用获取验证码的按钮
                this.totleTime=120;
                this.countTimeDown='重新获取'+this.totleTime+'s';// 开始倒计时
                this.timeDown();
            });
        },
        // 后台 获取验证码
        schoolCodeInRegister(phone, verification, timeStamp) {
            getPhoneCodeInRegister(phone, verification, timeStamp).then(res => {
                this.status=1;// 可以点击验证码
                this.getCodeBtn=!this.getCodeBtn; // 禁用获取验证码的按钮
                this.disabledCode=false;
                this.totleTime=120;
                this.countTimeDown='重新获取'+this.totleTime+'s';// 开始倒计时
                this.timeDown();
            })
           
        },
        // 倒计时
        timeDown() {
            if (this.totleTime==0) {
                this.getCodeBtn=!this.getCodeBtn,
                this.countTimeDown='获取验证码';
                this.status=0;// 不可以点击获取验证码
            } else {
                this.totleTime--;
                this.countTimeDown='重新获取'+this.totleTime+'s';// 倒计时
                setTimeout(() => {
                    this.timeDown();
                }, 1000);
            } 
        },
        // 点击下一步按钮，进入重置密码页面
        next(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                   
                    let phone=this.ruleForm.phone;
                    let captcha=this.ruleForm.qrcode;
                    let loginStatus=this.$route.query.loginStatus;
                    if (loginStatus=='1') {// 前台  一分钟内可以
                        if (this.status==1) {
                            this.checkCaptcha(phone, captcha, loginStatus);
                        } else if (this.status==0) {
                            this.$message.info('请重新获取验证码')
                        }
                    }
                    if (loginStatus=='2') {// 后台  一分钟内可以
                        if (this.status==1) {
                            this.verifyCaptcha(phone, captcha, loginStatus);
                        } else if (this.status==0) {
                            this.$message.info('请重新获取验证码')
                        } 
                    }
                }
            })
        },
        // 前台验证 下一步
        checkCaptcha(phone, captcha, loginStatus) {
            checkCaptcha(phone, captcha).then(res => {
                this.$router.push({name: '设置新密码', query: { phone, gotCode: captcha, loginStatus}});
            });
        },
         // 后台验证 下一步
        verifyCaptcha(phone, captcha, loginStatus) {
            verifyCaptcha(phone, captcha).then(res => {
                this.$router.push({name: '设置新密码', query: { phone, gotCode: captcha, loginStatus}});
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix {
    zoom: 1;
}
.con-box{
    width:100%;
    height: 100%;
    .con{
        padding-top:50px;
         margin:0 auto;
         width: 1000px;
         .progress-con{
             position: relative;
            .progress{
                position: absolute;
                top:0px;
                left:0px;
                    .line{
                        width:1000px;
                        height: 6px;
                        background: #dddddd;
                        border-radius: 3px;
                        position: relative;
                        p{
                            display:block;
                            width:333px;
                            text-align: center;
                            float: left;
                            height:6px;
                            background: #dddddd;
                            border-radius: 3px;
                            text-align: center;
                            z-index:10;
                             .num{
                                display: inline-block;
                                height: 30px;
                                line-height: 30px;
                                width:30px;
                                border-radius: 15px;
                                background: #dddddd;
                                color:#fff;
                                font-size:14px;
                                text-align: center;
                                position: relative;
                                top:-14px;
                                z-index:30;
                             }
                            .text{
                                font-size:17px;
                                text-align: center;
                                color:#666;
                                height: 30px;
                                line-height: 30px;
                                display:block;
                            }
                        }
                        .active{
                             .num{
                                  background: #ff5e2c;
                             }
                        }
                    }
                    .line-active{
                        height: 6px;
                        background: #ff5e2c;
                        border-radius: 3px;
                        position: absolute;
                        top:0px;
                        z-index: 2;
                    }
            }
         }     
        .form{
            margin:0 auto;
            width: 530px;
            margin-top:160px;
            .el-form-item__label{
                font-size:17px !important;
            }
            .el-row{
                margin:20px 0 40px;
            }
            .showFirst{
                .next{
                    margin-left:128px;
                }
            }
        }
    }
}
</style>
